<template>
	<view class="pageBg">
		<view class="searchBar">
			<view class="searchBox f_28 fw_400 tc_8 flex_r_fs_c">
				<text class="f_36 iconfont iconsearch margin_r16"></text>
				<input type="text" style="width:460rpx;color:#111;" confirm-type="search" placeholder-style="color:#888" placeholder="搜索您要找的东西" :value="inputValue" @confirm="onSearchInputConfirmed" @input="onSearchInputChanged" focus />
				<text class="f_32 fw_400 tc_1 margin_l24" @click.stop="inputSearch">搜索</text>
			</view>
		</view>
		<view v-if="isSearch" class="content">
			<scroll-view scroll-y="true" @scrolltolower="scrolltolower" :style="{
				height: scrollHeight + 'px',
				width: '750rpx'}"
			>
				<view class="inner">
					<view v-if="list.length === 0" class="noData f_36 tc_c flex_r_c_c">
						<text>木有数据呢~~(〃'▽'〃)</text>
					</view>
					<block v-for="(item, index) in list" :key="item.id">
						<view class="innerItem margin_b8 flex_r_fs_c" @click="handleClick(item)">
							<text class="f_36 fw_500 tc_1">{{item.name}}</text>
						</view>
					</block>
					<view v-if="noMore" class="noMore f_28 tc_c flex_r_c_c">
						<text>木有了呢~~(〃'▽'〃)</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="searchList.length>0 && !isSearch" class="history">
			<view class="margin_b24 flex_r_sb_c">
				<text class="f_32 fw_600 tc_1">历史记录</text>
				<text class="iconfont icondelete tc_6 f_36" @click.stop="cleanHistory"></text>
			</view>
			<view class="historyList flex_r_fs_c flex_w">
				<block v-for="(item, index) in searchList" :key="index">
					<view class="historyItem f_28 fw_400 tc_1 flex_r_c_c" @click.stop="handleSearch(item)">
						<text class="text_line_1">{{item}}</text>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
				scrollHeight: '',
				inputValue: '',
				searchList: [],
				isSearch: false, // 是否执行了搜索操作
				list: [
					{id: '01', name: '测试数据'},
					{id: '02', name: '测试数据'},
					{id: '03', name: '测试数据'},
					{id: '04', name: '测试数据'},
					{id: '05', name: '测试数据'},
					{id: '06', name: '测试数据'},
					{id: '07', name: '测试数据'},
					{id: '08', name: '测试数据'},
					{id: '09', name: '测试数据'},
					{id: '10', name: '测试数据'},
				],
				refresh: true,
				noMore: false,
				curPage: 1,
				lastPage: 0,
				total: 0,
			};
		},
		watch: {
		  // 监听选中的商品
		  searchList: {
		    handler(val) {
				// 记录到缓存中
				uni.setStorageSync('moon|history', val)
		    },
		    immediate: false
		  },
		},
		onLoad() {
			this.setScrollHeight()
		},
		onShow() {
			this.searchList = uni.getStorageSync('moon|history')? uni.getStorageSync('moon|history'):[]
		},
		methods: {
			setScrollHeight() {
				let sys = uni.getSystemInfoSync()
				let wh = sys.windowHeight
				// let hei = this.sysInfo.height + 44
				let hei = 76
				let topHei = Math.floor(this.sysInfo.rpx * hei * 2)
				let scrollHeight = wh - topHei
				this.scrollHeight = scrollHeight
			},
			scrolltolower() {
				if(this.lastPage === 0) {
					return
				}
				if(this.curPage !== this.lastPage) {
					this.doSearch(true)
				} else {
					this.noMore = true
				}
			},
			onSearchInputConfirmed(e) {
				this.doSearch()
			},
			onSearchInputChanged(e) {
				this.inputValue = e.detail.value
			},
			handleSearch(e) {
				this.inputValue = e
				this.doSearch()
			},
			inputSearch() {
				this.doSearch()
				// this.searchList.push(this.inputValue)
				// this.setSearchList(this.inputValue)
			},
			setSearchList(e) {
				let flag = this.searchList.find((item) => {
					return item === e
				})
				if(flag) {
					// 有相同的历史记录, 不予添加
					return
				}
				let arr = []
				if(this.searchList.length >= 9) {
					arr = this.searchList.slice(-8)
				} else {
					arr = this.searchList
				}
				arr.push(e)
				this.searchList = arr
			},
			cleanHistory() {
				uni.setStorageSync('moon|history', [])
				this.searchList = []
			},
			doSearch(isNextPage) {
				this.setSearchList(this.inputValue)
				let title = this.inputValue
				this.isSearch = true
				if(isNextPage) {
					++this.curPage
				} else {
					this.curPage = 1
				}
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #FFF;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.searchBar {
		width: 100%;
		padding: 32rpx 28rpx;
		box-sizing: border-box;
		.searchBox {
			width: 100%;
			height: 88rpx;
			background: #F4F4F4;
			border-radius: 44rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
	}
	.content {
		.inner {
			padding: 16rpx 28rpx 28rpx;
			box-sizing: border-box;
			.innerItem {
				width: 100%;
				height: 160rpx;
				padding: 24rpx 0rpx;
				box-sizing: border-box;
			}
		}
	}
	.history {
		padding: 16rpx 28rpx 28rpx;
		box-sizing: border-box;
		.historyList {
			.historyItem {
				max-width: 200rpx;
				height: 72rpx;
				padding: 20rpx 28rpx;
				box-sizing: border-box;
				border: 2rpx solid #CCC;
				border-radius: 40rpx;
				margin-right: 12rpx;
				margin-bottom: 16rpx;
			}
		}
	}
}
</style>
